import React from 'react';
import styles from './TeacherAttendanceCanlender.less';
import { Calendar,Row,Col,Spin } from 'antd';

function TeacherAttendanceCard({data}){
    return <div className={styles.Card}>
            {data.morning?<p className={styles.MorningSuc}>{data.morning}</p>:<p className={styles.MorningWar}>无打卡数据</p>}
            {data.afternoon?<p className={styles.NoonSuc}>{data.afternoon}</p>:<p className={styles.NoonWar}>无打卡数据</p>}
        </div>
}



function TeacherAttendanceCanlender({loading,target,data}) {

    function dateCellRender(value){
        let key = value.format('YYYY-M-D');
        // console.log(key);
        let targetDay = data[key];
        if(targetDay){
            return <TeacherAttendanceCard data={targetDay}/>
        }else{
            return null;
        }
    }


  return (
    <Row>
        {target?<Col><div>{target.name}</div></Col>:null}
        <Col><Spin spinning={loading}><Calendar dateCellRender={target?dateCellRender:undefined} /></Spin></Col>
    </Row>
  );
}

export default TeacherAttendanceCanlender;
